<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" clearable></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="form.description" clearable></el-input>
        </el-form-item>
        <el-form-item>

            <el-button type="primary" @click="onSubmit">筛选</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>

    export default {
        data() {
            return {
                form: {
                    title: null,
                    description: null,
                }
            }
        },
        computed: {
            tags() {
                let tags = [];
                if (this.form.title) {
                    tags.push('标题包含 ' + this.form.title);
                }
                if (this.form.description) {
                    tags.push('描述包含 ' + this.form.description);
                }

                return tags;
            }
        },
        methods: {
            onSubmit() {
                this.$emit('complete', this.form, this.tags);
            }, resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }
    }
</script>

<style scoped>

</style>